<template>
	<view class="">
		<u-form :model="formData" ref="uForm" label-width="150">
			<view class="container">
				<u-form-item label="商家名称:"><u-input v-model="formData.sellerName" disabled/></u-form-item>
				<u-form-item label="模板名称:"><u-input v-model="formData.transName" placeholder="请输入模板名称"/></u-form-item>
				<u-form-item label="计价方式:">
					<u-radio-group v-model="formData.chargeType">
						<u-radio :name="0">按件计费</u-radio>
						<u-radio :name="1">按重量计费</u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item label="物流公司:"><u-input v-model="formData.courierName" type="select" @click="show = true" placeholder="请选择物流公司"/></u-form-item>
				<u-form-item label="是否包邮:">
					<u-switch v-model="formData.isFreeFee" size="35"></u-switch>
				</u-form-item>
				<u-form-item class="" label="包邮条件:"  :border-bottom="false" v-show="formData.isFreeFee">
						<view>满<u-number-box style="margin: 0 20rpx;" v-model="formData.amount"></u-number-box>包邮</view>
						<!-- <view class="tip">
							如设置为0表示包邮无金额限制
						</view> -->
				</u-form-item>
			</view>
			<u-gap height="8" bg-color="#E3DFDF"></u-gap>
			<view class="container">
				<u-form-item label="默认计费">
					<view class="tip">(除特定地区外，其余地区的运费采用默认计费)</view>
				</u-form-item>
				<u-form-item label="1件内:"><u-input v-model="formData.firstFee" placeholder="请输入价格"/>元</u-form-item>
				<u-form-item label="每增加1件，增加运费:" label-width="300"><u-input v-model="formData.continuousFee" placeholder="请输入增加的运费"/>元</u-form-item>
			</view>
			<u-gap height="8" bg-color="#E3DFDF"></u-gap>
			<view class="container special">
				<view class="special-title u-flex" >
					<view style="color:#FC2A4D" class="u-flex-1">
						新增特定地区计费
					</view>
					<u-button type="error" shape="circle" size="mini" @click="addArea">
						<text style="padding: 0 30rpx;">新增</text>
					</u-button>
				</view>
				<view class="content" v-for="(spe,speIndex) in formData.specialAreasVo" :key="speIndex">
					<view class="order-number">
						<view class="order-number-text">
							{{formData.specialAreasVo.length - speIndex}}
						</view>
					</view>
					<u-cell-item title="特定地区（多选）:" :arrow="false" :border-bottom="false"  @click="openArea(speIndex)">
						<u-icon slot="right-icon" size="28" color="rgb(192, 196, 204)" name="arrow-down-fill"></u-icon>
					</u-cell-item>
					<view class="tags">
						<u-tag v-for="(item, index) in spe.citys" :key="index" class="tag" :text="item.regionName" mode="light" type="primary" :closeable="true" @close="tagClick(index, speIndex)"/>
					</view>
					<u-form-item label="首件:">
						<u-input v-model="spe.firstPiece" type="number"/>
					</u-form-item>
					<u-form-item label="1首费(元):"><u-input v-model="spe.firstFee" placeholder="请输入收费价格"/></u-form-item>
					<u-form-item class="" label="续件:">
						<u-input v-model="spe.continuousPiece"  type="number"/>
					</u-form-item>
					<u-form-item label="续费(元)："><u-input v-model="spe.continuousFee" placeholder="请输入续费价格"/></u-form-item>
					<u-cell-item :arrow="false">
						<u-button type="error" shape="circle" size="mini" :plain="true" @click="removeArea(speIndex)">
							<text style="padding: 0 10rpx;">删除</text>
						</u-button>
					</u-cell-item>
				</view>
			</view>
			<view class="btn-box">
				<u-button type="primary" shape="circle" @click="submit">{{transportId? '提交' : '保存'}}</u-button>
			</view>
		</u-form>
		<u-select v-model="show" :list="LOGISTICSCOMPANY" @confirm="confirm"></u-select>
		<u-popup v-model="areaShow" mode="bottom">
			<view class="area-box">
				<view :class="['item', {'active': item.active}]" v-for="(item, index) in areaOptions" :key="index" @click="areaSelect(index)">
					{{item.regionName}}
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import CONSTDATA from './data.js'
	export default{
		data(){
			return {
				transportId: '',
				areaShow: false,
				show: false,
				formData: {
				  sellerName: '',
				  sellerId: '',
				  mobile: '',
				  transName: '',
				  chargeType: 0,
				  courierName: '',
				  isFreeFee: false,
				  amount: 0,
				  firstPiece: 1, //首件数量
				  firstFee: 0, //首件费用
				  continuousPiece: 1, //续件数量
				  continuousFee: 0, //续件费用
				  specialAreasVo: []
				},
				LOGISTICSCOMPANY: CONSTDATA.LOGISTICSCOMPANY,
				areaOptions: [],
				curCourierName: {},
				speCurIndex: undefined
			}
		},
		onLoad(option) {
			this.transportId = option.id;
			uni.setNavigationBarTitle({
			    title: this.transportId ? '编辑运费模板' : '添加运费模板'
			});
			this.formData.sellerName = uni.getStorageSync('merShortName');
			this.formData.sellerId = uni.getStorageSync('mid');
			this.getInfo()
			this.regionList()
			// if (this.transportId) {
			// 	this.getDetail()
			// }
		},
		
		methods:{
			// 获取运费模板详情
			getDetail() {
				this.$u.api.transportEditDetail({
					transportId: this.transportId
				}).then(res=>{
					if(res.code == 0){
						// 特定地区
						if (res.data.specialAreasVo.length > 0) {
							res.data.specialAreasVo.map(item => {
								item.cityIdList.forEach(city => {
									const _cIndex = this.areaOptions.findIndex(i => {return city == i.regionCode})
									if (_cIndex != -1) {
										if (item.citys) {
											item.citys.push(this.areaOptions[_cIndex])
										} else {
											item.citys = [this.areaOptions[_cIndex]]
										}
									}
								})
								return item
							})
						}
						res.data.amount = res.data.amount ? res.data.amount : 0
						this.formData = res.data;
					}else{
						uni.showToast({
							icon:'none',
						    title: res.msg
						});
					}
				})
			},
			submit() {
				let params = JSON.parse(JSON.stringify(this.formData))
				params.specialAreasVo= this.formData.specialAreasVo.map(item => {
					let newList = item.citys.reduce((acc, cur) => {
						acc.push(cur.regionCode)
						return acc
						}, [])
					delete item.citys;
					item.cityIdList = newList;
					return item
				})
				if (this.transportId) {
					this.$u.api.transportUpdate(params).then(res=>{
						if(res.code == 0){
							uni.showToast({
								icon:'none',
							    title: '运费模板修改成功'
							});
							uni.navigateBack({
							    delta: 1
							});
						}else{
							uni.showToast({
								icon:'none',
							    title: res.msg
							});
						}
					})
				} else {
					this.$u.api.transportAdd(params).then(res=>{
						if(res.code == 0){
							uni.showToast({
								icon:'none',
							    title: '运费模板添加成功'
							});
							uni.navigateBack({
							    delta: 1
							});
						}else{
							uni.showToast({
								icon:'none',
							    title: res.msg
							});
						}
					})
				}
			},
			//添加特定区域
			addArea() {
				this.formData.specialAreasVo.unshift({
				  citys: [], //特殊城市id
				  firstPiece: 1, //首件数量
				  firstFee: '', //首件费用
				  continuousPiece: 1, //续件数量
				  continuousFee: '', //续件费用
				})
			},
			//移除特定区域
			removeArea(index) {
				this.formData.specialAreasVo.splice(index, 1);
			},
			confirm(e) {
				this.curCourierName = e[0];
				this.formData.courierName = e[0].label;
				console.log(e)
			},
			tagClick(index, speIndex) {
				this.speCurIndex = speIndex;
				const curIndex = this.areaOptions.findIndex(item => {return this.formData.specialAreasVo[this.speCurIndex].citys[index].regionCode == item.regionCode})
				if (curIndex != -1) {
					this.areaOptions[curIndex].active = false;
				}
				this.formData.specialAreasVo[this.speCurIndex].citys.splice(index, 1)
			},
			// 初始化省份选择框
			openArea(speIndex) {
				this.areaShow = true;
				this.speCurIndex = speIndex;
				let curCity = this.formData.specialAreasVo[this.speCurIndex].citys;
				console.log(curCity)
				this.areaOptions.forEach(itemA => {
					itemA.active = false;
				})
				this.areaOptions.forEach(itemA => {
					for (let i = 0; i < curCity.length; i++) {
						if (curCity[i].regionCode == itemA.regionCode) {
							itemA.active = true;
						}
					}
				})
			},
			areaSelect(index) {
				if (this.areaOptions[index].active) {
					this.areaOptions[index].active = false;
					const curIndex = this.formData.specialAreasVo[this.speCurIndex].citys.findIndex(item => {return this.areaOptions[index].regionCode == item.regionCode})
					if (curIndex != -1) {
						this.formData.specialAreasVo[this.speCurIndex].citys.splice(curIndex, 1)
					}
				} else {
					this.areaOptions[index].active = true;
					this.formData.specialAreasVo[this.speCurIndex].citys.push(this.areaOptions[index])
				}
				// console.log(this.citys)
			},
			getInfo() {
				this.$u.api.getMerchantInfo().then(res=>{
					if(res.code == 0){
						this.formData.mobile = res.data.merchantTel;
					}else{
						uni.showToast({
							icon:'none',
						    title: res.msg
						});
					}
				})
			},
			regionList() {
				this.$u.api.regionList({
					parentCode: 0
				}).then(res=>{
					if(res.code == 0){
						if (this.transportId) {
							this.getDetail()
						}
						this.areaOptions = res.data;
					}else{
						uni.showToast({
							icon:'none',
						    title: res.msg
						});
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.container{
		padding: 0 30rpx;
	}
	.tip {
		font-size: 24rpx;
		color: #357CD4;
	}
	.special {
		padding-top: 28rpx;
		
		.content {
			position: relative;
			padding: 0 24rpx;
			margin-bottom: 20rpx;
			border: 1rpx solid #E6E6E6;
			border-radius: 10rpx;
			overflow: hidden;
			
			.order-number {
				position: absolute;
				top: 0;
				left: 0;
				z-index: 2;
				color: #fff;
				width: 0;
				height: 0;
				border-bottom: 70rpx solid transparent; 
				border-left: 70rpx solid #7CB1FC;
				border-right: 70rpx solid transparent;
			}
			.order-number-text {
				    position: absolute;
				    left: -70rpx;
				    top: 0;
				    width: 70rpx;
				    height: 70rpx;
				    z-index: 3;
				    padding-left: 4rpx;
			}
			.tags {
				padding: 0 10rpx;
				display: flex;
				flex-wrap: wrap;
				.tag {
					margin-right: 10rpx;
					margin-bottom: 10rpx;
				}
			}
		}
		
	}
	.special-title {
		// text-align: center;
		padding-bottom: 28rpx;
	}
	.btn-box {
		padding: 20rpx 70rpx;
	}
	.area-box {
		padding: 30rpx;
		max-height: 50vh;
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
		overflow-y: scroll;
		.item {
			width: 100%;
			color: #333333;
			padding: 20rpx 0;
			border-bottom: 1rpx solid #EEEEEE;
		}
		.active {
			color: #357CD4;
		}
	}
</style>
